<template>
  <div>
    <template v-if="wentikuList.length > 0">
      <div
        class="collectList pointer"
        v-for="(item, index) in wentikuList"
        :key="index"
        @mouseenter="onMouseOver(item, index)"
        @mouseleave="onMouseOut"
      >
        <div class="title ellipsis2 fz16" @click="goDetail(item)">
          {{ item.title }}
        </div>
        <div
          class="info ellipsis2 c666"
          v-html="item.answer_content"
          @click="goDetail(item)"
        ></div>
        <div class="tips" v-if="showTipsIndex == index" @click="cancelLike">
          <img src="~/assets/images/userCenter/1_shanchu.png" alt="" />
          <span class="c999 fz14 mt10">取消收藏</span>
        </div>
      </div>
      <!-- 分页 -->
      <div v-if="count > 0" class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="count"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <el-empty description="暂无数据"></el-empty>
    </template>
  </div>
</template>

<script>
import { getMyCollect, wtk_cancelLike } from "@/assets/api/userCenterApi.js";

export default {
  data() {
    return {
      showTipsIndex: -1, //展示右侧取消收藏的按钮的下标
      page: 1,
      limit: 10,
      count: 0,
      wentikuList: [],
    };
  },
  mounted() {
    this.getMyCollect();
  },
  methods: {
    //进详情
    goDetail(item) {
      this.$router.push({
        path: "/quizdata/"+item.id+'.html',
      });
    },
    //鼠标移入
    onMouseOver(item, index) {
      this.showTipsIndex = index;
    },
    //鼠标移出
    onMouseOut() {
      this.showTipsIndex = -1;
    },
    //取消收藏
    async cancelLike() {
      let params = {
        id: this.wentikuList[this.showTipsIndex].id,
      };
      let res = await wtk_cancelLike(params);
      this.showTipsIndex = -1;
      if (res.code == 1) {
        this.$message({
          message: "取消收藏成功",
          type: "success",
        });
        this.wentikuList = [];
        this.page = 1;
        this.getMyCollect();
      }
    },
    //获取数据列表
    async getMyCollect() {
      var params = {
        page: this.page,
        limit: this.limit,
        type: 2,
      };
      let res = await getMyCollect(params);
      if (res.code == 1) {
        this.wentikuList = res.data.data;
        this.count = res.data.total
      }
    },

    //分页
    changePage(e) {
      console.log("分页", e);
      this.page = e;
      this.getMyCollect();
    },
  },
};
</script>

<style lang="scss" scoped>

@import url("@/assets/static/reset.css");

.collectList {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #f4f4f4;
  &:hover {
    background: #f7f9fb;
    color: #1c87f3;
  }

  .leaf {
    width: 11px;
    height: 18px;
    margin-right: 2px;
  }
  .leafNum {
    margin-right: 20px;
    color: #ff5900;
    font-size: 18px;
  }

  .title {
    width: 700px;
    font-size: 18px;
  }
  .info {
    width: 700px;
    font-size: 14px;
    margin-top: 15px;
  }
  .tips {
    cursor: pointer;
    position: absolute;
    top: 47px;
    right: 37px;

    img {
      width: 26px;
      height: 26px;
      vertical-align: middle;
    }
  }
}
.page {
  padding-top: 13px;
  padding-bottom: 63px;
  display: flex;
  justify-content: center;
}
</style>

<style lang="scss" scoped>
::v-deep .is-active {
  border-bottom-color: white !important;
}
</style>
